<template>
  <div class="searchWrap">
    <div class="search">
      <search
        id="search"
        v-model="searchCondition"
        placeholder="请姓名进行快速查找"
        position="absolute"
        auto-scroll-to-top
        @on-change="searchResultFun"
        @on-cancel="onCancelSearch"
        @on-submit="searchResultFun"
        ref="search"
      ></search>
    </div>
    <div v-show="showSearchResult" class="ul_box">
      <div v-if="searchResult">
        <div v-for="(item,index) in searchResult" :key="index" class="list_item">
          <span
            @click="showRepoOfThisStudent(item)"
            class="search_item"
          >&nbsp;{{item.userName}}&nbsp;</span>
        </div>
      </div>
      <div v-if="!searchResult.length" style="margin-top: 15px">
        <h5 style="text-align: center;color: #b2b2b2;font-weight: normal;margin: 10px">该用户与您不存在共同小组</h5>
      </div>
    </div>
  </div>
</template>

<script>
import { Search } from "vux";
import group from "api/group";
import { mapState } from "Vuex";
export default {
  components: {
    Search,
  },
  data() {
    return {
      searchCondition: "", //搜索条件
      searchResult: [], //存放搜索的结果
      showSearchResult: false, //控制显示搜索结果
    };
  },
  watch: {
    searchCondition(val) {
      this.showSearchResult = !(val === null || val === "");
    },
  },
  computed: {
    ...mapState(["reportContentProf"]),
  },
  methods: {
    onCancelSearch() {
      this.searchCondition = null;
      this.showSearchResult = false;
      this.searchResult = [];
      console.log("退出搜索");
    },
    async searchResultFun() {
      if (this.searchCondition !== null && this.searchCondition !== "") {
        const result = await group.getGMembersByName(this.searchCondition);
        console.log("搜索", result);
        if (result.code === 1) {
          if (result.data.length === 0) {
            this.searchResult = [];
          } else {
            this.searchResult = result.data;
          }
        } else if (result.code === 0) {
          this.showAlert("搜索失败，请稍后再试");
        }
        console.log("搜索结果", this.searchResult);
        return this.searchResult;
      }
    },
    showRepoOfThisStudent(item) {
      if (this.showSearchResult) {
        this.onCancelSearch();
      }
      // 把选中的值传回给U-view-all
      this.$emit("showRepoOfThisStudent", {
        index: this.reportContentProf.indexOf(item),
        member: item.userId,
      });
    },
  },
};
</script>

<style scoped>
.searchWrap {
  /* position: fixed;
  top: 46px;
  width: 100%;
  background: rgb(237, 237, 237); */
}
.search {
  
}
.ul_box {
  float: top;
  margin-top: 30px;
  background-color: #fff;
  padding: 5px 20px;
  border: #b0c4de solid 1px;
  margin-bottom: -20px;
}
.search_item {
  margin-top: 10px;
  border: #213b4f dashed 1px;
  color: #213b4f;
  letter-spacing: 1px;
  font-size: 15px;
  /*margin-bottom: -5px;*/
}
</style>